<template>
  <div class="vue-quill-editor">
    <div class="title-row">
      <el-input
          v-model="title"
          placeholder="请输入文章标题"
          :maxlength="maxlength"
      />
      <p class="limit">{{ title.length }}/{{ maxlength }}</p>
      <el-button type="primary" @click="clickPubulish">发布</el-button>
      <avatar :size="40" class="avatar"/>
    </div>
    <quill-editor
        v-model="content"
    />
    <pop-publish
        ref="pop"
        @submit="submit"
    />
    <h3 style="background-color:#F4F5F5;text-align: right">{{ content.length }} / 20000</h3>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import {quillEditor} from 'vue-quill-editor'
import PopPublish from "@/views/vue-quill-editor/pop-publish";
import article from "@/api/article";
import Avatar from "@/components/avatar";

export default {
  name: "vue-quill-editor",
  components: {Avatar, PopPublish, quillEditor},
  data() {
    return {
      title: '',
      content: '',
      maxlength: 50
    }
  },
  methods: {
    clickPubulish() {
      if(this.userInfo.userId){
        if(!this.title){
          this.$warning('请填写标题')
        }else if(!this.content){
          this.$warning('请填写内容')
        }else{
          this.$refs.pop.popShow()
        }
      }else{
        this.$warning('请先登录')
      }
    },
    submit(params) {
      if(params.tags.length===0) {
        this.$warning('未选择标签')
      }else if(!params.description) {
        this.$warning('未填写简要描述')
      }else{
        params.tags = params.tags.join(',')
        article.publish(params)
        .then((res) => {
          console.log(res)
          if(res.code === 200) {
            this.$success('发布成功')
            setTimeout(()=>{
              this.$router.go(0);
            },1000)
          }else {
            this.$error(res.msg)
          }
        })
        .catch((err) => {
          this.$error(err)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.vue-quill-editor {
  background-color: #fff;
}

.title-row {
  .flex-center();
  /deep/ .el-input {
    height: 60px;
    font-size: 32px;
    font-weight: bold;
  }

  /deep/ .el-input__inner {
    height: 60px;
    border: none;
  }
  .avatar {
    margin: 0 20px;
  }

  .limit {
    margin: 0 20px;
  }
}
/deep/ .ql-editor {
  min-height: 400px;
}
</style>